<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>管理首页 | STAT HUB</title>
	<link type="text/css" rel="stylesheet" href="resource/css/framework.css" />
	<link type="text/css" rel="stylesheet" href="resource/css/main.css" />
	<script type="text/javascript" src="resource/javascript/jquery.min.js"></script>
	<script type="text/javascript" src="resource/javascript/stathub.js"></script>
</head>
<body>
	<div class="page">
		<!--header begin-->
		<header>
			<div class="bigcontainer">
				<div id="logo">
					<a href="/">STAT HUB 应用管理</a>
				</div>
				<div class="user">
					<div class="ui compact notif menu">
						<a class="item" href="notifications.html">
							<i class="mail large icon"></i>
							<span id="message_count" class="circular floating ui small red label"></span>
						</a>
					</div>
					<div class="ui icon top right dropdown">
						<a href="user_profile.html">
							<img class="ui avatar image" src="resource/images/avatar-default.gif"/>
							欢迎，管理员
						</a>
					</div>
				</div>
			</div>
		</header>
		<!-- the main menu-->
		<div class="ui teal inverted menu">
			<div class="bigcontainer">
				<div class="right menu">
					<a class="active item" href="/"><i class="home icon"></i>管理首页</a>
					<a class="item" href="node_list.html"><i class="sitemap icon"></i>节点</a>
					<a class="item" href="app_list.html"><i class="cloud icon"></i>应用</a>
					<a class="item" href="help.html"><i class="help icon"></i>帮助</a>
					<a class="item" href="api_doc.html"><i class="info icon"></i>API接口</a>
				</div>
			</div>
		</div>
		<!--the main content begin-->
		<div class="container">
			<!--the content-->
			<div class="pageHeader">
				<div class="segment">
					<h3 class="ui dividing header">
						<i class="large home icon"></i>
						<div class="content">管理首页<div class="sub header">快速查看和编辑</div></div>
					</h3>
				</div>
			</div>
			<div id="no_node_warning" class="ui warning message hidden">
				<i class="close icon" data-dismiss="alert"></i>
				<div class="header"><i class="warning icon"></i> 没有在线节点</div>
				没有在线节点，无法运行应用。请看 <a href="help.html#node" title="帮助-节点">这里</a> ，了解怎样创建和启动节点。
			</div>
			<div id="no_app_warning" class="ui warning message hidden">
				<i class="close icon" data-dismiss="alert"></i>
				<div class="header"><i class="warning icon"></i> 没有应用</div>
				没有应用。请点击 <a href="new_app.html" title="创建应用">这里</a> ，创建第一个应用。
			</div>
			<div class="ui small message" id="showApiKey">
				<div class="ui form segment">
					<div class="inline field">
						<label>输入应用名称 :</label>
						<div class="ui small left icon input short">
							<i class="cloud icon"></i>
							<input type="text" value="" id="app_name">
						</div>
						<a id="search_button" class="ui mini blue animated button" href="javascript:void(0)">
							<span class="visible content">查看</span>
							<span class="hidden content">
								<i class="search icon"></i>
							</span>
						</a>
						<label>
						符合搜索条件的应用 <span id="totalCount"></span> 个，
						共 <span id="pageCount"></span> 页，这是第 <span id="pageIndex"></span> 页
						</label>
						<a id="appQuickButton" class="ui red small labeled icon button" href="./app_list.html">
							<i class="settings icon"></i>管理所有应用
						</a>
					</div>
				</div>
			</div>
			<!--app list-->
			<div class="ui three column grid" id="indexList"></div>
			<div id="pagination" class="ui pagination menu"></div>
		</div>
	</div>
	<!--footer begin-->
	<footer>
		<div id="copyrights">
			<div class="inset">
				<div class="bigcontainer">
					<div class="fl">
						<div class="logo"></div>
						<p>&copy; 2014 lane.cn@gmail.com <a href="https://github.com/lane-cn/stat" target="_blank">https://github.com/lane-cn/stat</a></p>
					</div>
				</div>
			</div>
		</div>
	</footer>
	<script>
	var PAGE_SIZE = 10;
	$(document).ready(function() {
		$.ajax({
			url: '/v1/node/_search?from=0&size=0&includeDownNode=false',
			type: 'POST',
			contentType: 'application/json',
			data: '*',
			dataType: 'json',
			success: function(data, status, xhr) {
				if (data.total == 0) {
					$('#no_node_warning').show();
				}
			},
			error: function(xhr, status, error) {
				alert('查询失败，状态：' + error + ', 信息: ' + xhr.responseJSON);
			}
		});
		
		$.get('/v1/app', function(app_names, status, xhr) {
			if (app_names.length == 0) {
				$('#no_app_warning').show();
			}
		});
		
		$('#search_button').click(function() {
			show_apps(0);
		});
		
		show_apps(0);
		
		setInterval(function() {
			show_stats();
		}, 5000);
	});
	
	function show_apps(from) {
		$("#indexList").empty();
		var query = $('#app_name').val();
		var size = PAGE_SIZE;
		$.get('/v1/app?query=' + encodeURIComponent(query), function(app_names, status, xhr) {
			show_pagination(app_names.length, from, size);
			var last, i;
			for (i = 0; i < app_names.length - from && i < size; i++) {
				//add row
				if (i % 3 == 0) {
					$("#indexList").append('<div id="row_' + i + '" class="row"></div>');
					last = $("#row_" + i);
				}
				//add column
				last.append(get_app_column_html(app_names[i + from]));
			}
			//add row for operation column
			if (i % 3 == 0) {
				$("#indexList").append('<div id="row_' + i + '" class="row"></div>');
				last = $("#row_" + i);
			}
			last.append(get_oper_column_html());
			//show data
			$.each(app_names, function(i, app_name) {
				show_app(app_name);
			});
			//show status
			show_stats();
		});
	}
	
	function show_pagination(total, from, size) {
		var page_count = total % size == 0 ? total / size : Math.floor(total / size) + 1;
		var page_index = from / size + 1;
		$('#totalCount').text(total);
		$('#pageCount').text(page_count);
		$('#pageIndex').text(page_index);
		$("#pagination").empty();
		
		if (page_index == 1) {
			$('#pagination').append('<a class="icon item"><i class="icon left arrow"></i></a>');
		} else {
			$('#pagination').append('<a class="icon item" onclick="show_apps(' + (from - size) + ')"><i class="icon left arrow"></i></a>');
		}
		
		var max_pos = 3;
		var start = 1;
		var start_dis = false;
		if (page_index - start > max_pos) {
			start = page_index - max_pos;
			start_dis = true;
		}
		
		var end = page_count;
		var end_dis = false;
		if (end - page_index > max_pos) {
			end = page_index + max_pos
			end_dis = true;
		}
		
		if (start_dis) {
			$('#pagination').append('<div class="disabled item">...</div>');
		}
		
		//show page index
		for (var i=start; i<=end; i++) {
			if (i == page_index) {
				$('#pagination').append('<a class="active item">' + i + '</a>');
			} else {
				$('#pagination').append('<a class="item" onclick="show_apps(' + ((i - 1) * size) + ')">' + i + '</a>');
			}
		}
		
		if (end_dis) {
			$('#pagination').append('<div class="disabled item">...</div>');
		}

		//show next page
		if (page_index == page_count) {
			$('#pagination').append('<a class="icon item"><i class="icon right arrow"></i></a>');
		} else {
			$('#pagination').append('<a class="icon item" onclick="show_apps(' + (from + size) + ')"><i class="icon right arrow"></i></a>');
		}
	}
	
	function show_stats() {
		var app_names = get_keys();
		$.each(app_names, function(i, app_name) {
			show_stat(app_name);
		});
	}
	
	function show_stat(app_name) {
		$.get('/v1/app/' + app_name, function(app, status, xhr) {
			$.get('/v1/app/' + app_name + '/choreo', function(choreo, status, xhr) {
				$.get('/v1/app/' + app_name + '/proc', function(ps, status, xhr) {
					//app status
					if (app.start) {
						$('#status_' + app.name).html('<span class="ui type label green">启动</span>');
					} else {
						$('#status_' + app.name).html('<span class="ui type label black">停止</span>');
					}
					//process status
					var scale = app.start ? choreo.scale : 0;
					$('#stat_' + app_name).empty();
					$('#stat_' + app_name).append('进程：');
					if (scale == 0) {
						$('#stat_' + app_name).append('无');
					} else {
						for (var i = 0; i < scale; i ++) {
							if (i < ps.length) {
								$('#stat_' + app_name).append('<span class="ui green ok label" ></span> ');
							} else if (i < choreo.dist.length) {
								$('#stat_' + app_name).append('<span class="ui orange error label" ></span> ');
							} else {
								$('#stat_' + app_name).append('<span class="ui red error label" ></span> ');
							}
						}
					}
				});
			});
		});
	}
	
	function get_keys() {
		var keys = new Array();
		var ctls = $('.app_key');
		if (ctls) {
			for (var i = 0; i < ctls.length; i++) {
				var ctl = ctls[i];
				keys.push(ctl.innerHTML);
			}
		}
		return keys;
	}
	
	function get_oper_column_html() {
		var html = '<div class="column">';
		html += '<div class="ui blue segment">';
		html += '<a class="content" href="new_app.html">';
		html += '<h4 class="newApp">';
		html += '<i class="huge add icon"></i>添加新应用';
		html += '</h4>';
		html += '</a>';
		html += '</div>';
		html += '</div>';
		return html;
	}
	
	function get_app_column_html(app_name) {
		var html = '<div class="column">';
		html += '<div class="ui blue segment">';
		html += '<div class="ui message hidden app_key">' + app_name + '</div>';
		html += '<a href="./app.html?name=' + app_name + '" class="content">';
		html += '<h4 class="appName">' + app_name + ' <span id="status_' + app_name + '"></span></h4>';
		html += '<p class="appId">资源：<span id="res_' + app_name + '"></span></p>';
		html += '<p class="appDescription"><span id="desc_' + app_name + '"></span></p>';
		html += '<p id="stat_' + app_name + '" class="procStatus"></p>';
		html += '</a>';
		html += '</div>';
		html += '</div>';
		return html;
	}
	
	function show_app(app_name) {
		$.get('/v1/app/' + app_name, function(app, status, xhr) {
			if (app) {
				if (app.start) {
					$('#status_' + app.name).html('<span class="ui type label green">启动</span>');
				} else {
					$('#status_' + app.name).html('<span class="ui type label black">停止</span>');
				}
				if (app.resAlloc) {
					var text = 'CPU ' + app.resAlloc.cpus + ' 核，内存 ' + byteCountToDisplaySize(app.resAlloc.mem) + '，磁盘空间 ' + byteCountToDisplaySize(app.resAlloc.disk);
					$('#res_' + app.name).html(text);
				} else {
					$('#res_' + app.name).text('不分配');
				}
				var cmd = '';
				if (app.toProcess) {
					cmd = app.toProcess + ' ';
				}
				if (app.args) {
					cmd += app.args.join(' ');
				}
				$('#desc_' + app.name).text(cmd);
			}
		});
	}
</script>
</body>
</html>
